<!DOCTYPE html>

<html>

<head>
<title>CRONOMETRO</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/estilos.css" type="text/css">
<script type="text/javascript" src="js/zepto.min.js"> </script>
<script type="text/javascript" src="js/touch.js"> </script>
<script type="text/javascript">
  $(function(){

	//localstoage
	localStorage.crono = (localStorage.crono || "0.00");
	localStorage.listatiempos = (localStorage.listatiempos || "");
	localStorage.contador  = (localStorage.contador || "0");

	//variables
    var t, cl = $("#crono");
	var lista = $("#lista");
	var boton = $( "#cambiar" );
	var b = $( "#container" );
	var shown = true;

	//Función para el incremento
    function incr()     { localStorage.crono = +localStorage.crono + 0.01; }
	//Funcion para mostrar el tiempo
    function mostrar()  { var tiempo=parseFloat(localStorage.crono).toFixed(2); cl.html(tiempo.replace(".",":")); };
    //Pone en marcha el contador
	function arrancar() { boton.html("Parar");t=setInterval(function(){incr(); mostrar()}, 10);clearInterval(a); shown = true;};
    //Para el contador
	function parar()    { boton.html("Seguir");clearInterval(t);  t=undefined; localStorage.contador=+localStorage.contador+1};
    //Si el contador no está en Marcha, llama a arrancar y actualiza el botón. Si está parado, actualiza la lista, la muesta y actualiza el botón.
	function cambiar()  { if (!t) {arrancar();} else {parar();actuali();mostrarli();}};
    //Actualizar la lista de tiempos
	function actuali()  { var tiempo = parseFloat(localStorage.crono).toFixed(2); localStorage.listatiempos = localStorage.listatiempos+"<tr><td> # " + localStorage.contador +"</td><td>"+tiempo.replace(".",":") + " segundos </td></tr>";};
    //Mostrar la lista de tiempos
	function mostrarli(){ lista.html(localStorage.listatiempos);};
    //Poner a 0 el contador, vaciar la lista de tempos, el contador de paradas y quitar el parpadeo.
	function inicializar(){ if(!t){boton.html("Arrancar");localStorage.crono="0.00";localStorage.listatiempos=""; localStorage.contador="0";mostrar();mostrarli();shown = true;}};
	
	// Eventos
	   $("#cambiar").on('click', cambiar);
	   $("#inicializar").on('click', inicializar);
	   $("button").on('tap', function () {return false;});
		b.on('tap', cambiar);
		b.on('swipe', inicializar);

	// Inicializaciones
	    mostrar();
	    mostrarli();	
	
  });
</script>
</head>

<body>
	<h2>CRONOMETRO</h2>

	<div class="principal">
		
		
		<div class="container" id="container">
			<span id="crono">00:00</span>
		</div>

		<button type="button" class="button" id="cambiar">
			Arrancar
		</button>
		<button type="button" class="button" id="inicializar">
			Inicializar
		</button>

	</div>

	<div class="paradas">
		<table id="lista">
		</table>
	</div>

</body>
</html>